<!-- 物资编辑详情页面 -->
<template>
  <div>
    <div class="good-info">
      <div class="good-forms">
        <div class="moreSty">
          <van-field v-model="form.model" class="basicClass" label="型号" placeholder-style="color:#999;" placeholder="请输入" autosize type="input" @change="form.model = $event.detail" />
        </div>
        <div class="moreSty">
          <van-field v-model="form.code" class="basicClass" label="编号" placeholder-style="color:#999;" placeholder="请输入" autosize type="input" @change="form.code = $event.detail" />
        </div>
        <div>
          <van-field v-model="status" class="inputClass" label="状态" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @change="status = $event.detail" @click-input="clickInput('status')" />
          <van-popup class="dropClass" :show="showState" position="bottom">
            <van-picker show-toolbar :columns="stateList" @cancel="onCancel('status')" @confirm="onStateConfirm" />
          </van-popup>
        </div>
        <div class="moreSty">
          <van-field v-model="form.recipient" class="basicClass" label="受用人" placeholder-style="color:#999;" placeholder="请输入" autosize type="input" @change="form.recipient = $event.detail" />
        </div>
        <!-- lingyong -->
        <div class="good-time">
          <good-time v-model="form.useDate" type="datetime" :label="'领用日期'" />
        </div>
        <!-- lingyong -->
        <div class="moreSty">
          <van-field v-model="form.purchaser" class="basicClass" label="采购人" placeholder-style="color:#999;" placeholder="请输入" autosize type="input" @change="form.purchaser = $event.detail" />
        </div>
        <div>
          <van-field v-model="form.materialType" class="inputClass" label="物资类型" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @change="form.materialType = $event.detail" @click-input="clickInput('materialType')" />
          <van-popup class="dropClass" :show="showPicker" position="bottom">
            <van-picker show-toolbar :columns="typeList" @cancel="onCancel('materialType')" @confirm="onConfirm" />
          </van-popup>
        </div>
        <div class="good-time">
          <good-time v-model="purchaseDate" type="datetime" :label="'采购日期'" />
        </div>
        <div class="good-picture">
          <ze-upload v-model="form.pictures" style="width: 100%;" type="upload" label="图片" />
        </div>
        <div class="moreSty">
          <van-field v-model="form.repairFrequency" class="basicClass" label="维修次数" placeholder-style="color:#999;" placeholder="请输入" autosize type="input" @change="form.repairFrequency = Number($event.detail)" />
        </div>
        <div class="good-record">
          <div class="img">
            维修记录
          </div>
          <div class="good-add" @click="addData">
            + 添加
          </div>
        </div>
        <div class="good-record-con">
          <div v-for="(item, index) in resonList" :key="index" class="good-record-detail">
            <div class="detail-top">
              <div class="detail-time">
                <div>维修日期：</div>
                <div>{{ item.maintenanceDate | timeFormat }}</div>
              </div>
              <div class="detail-icon">
                <van-icon color="#739eca" name="edit" @click="clickEdit(item)" />
                <van-icon color="red" name="delete-o" @click="clickDelete(item.maintenanceReason)" />
              </div>
            </div>
            <div class="detail-bot">
              <div>维修原因：</div>
              <div>{{ item.maintenanceReason }}</div>
            </div>
          </div>
          <div v-for="(item, index) in resonLists" :key="index" class="good-record-detail">
            <div v-if="showRecode" class="detail-top">
              <div class="detail-time">
                <div>维修日期：</div>
                <div>{{ item.maintenanceDate | timeFormat }}</div>
              </div>
            </div>
            <div v-if="showRecode" class="detail-bot">
              <div>维修原因：</div>
              <div>{{ item.maintenanceReason }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="good-btns">
        <van-button size="large" color="linear-gradient(180deg, #739ECA 0%, #ABCDE7 100%)" class="submit" round @click="submitPerson">
          保存
        </van-button>
      </div>
    </div>
    <van-toast id="van-toast" />
    <maintenance-records ref="maintenance" @mainValue="mainValue" />
    <van-dialog id="van-dialog" />
  </div>
</template>
<script>
import goodTime from '../good-time.vue'
import maintenanceRecords from './maintenance-records.vue'
import ZeDatetime from '@/components/ze-oa-form/ze-datetime.vue'
import { editMaterials, getGoodsDetail } from '@/apis/office'
import zeUpload from '@/components/ze-oa-form/ze-upload.vue'
import { DICT_TYPE, getDictDatas } from '@/utils/dict'
import Dialog from '@/wxcomponents/vant/dialog/dialog'

import Toast from '@/wxcomponents/vant/toast/toast'
import { formatTimestamp } from '@/utils/format'
export default {
  components: { goodTime, ZeDatetime, zeUpload, maintenanceRecords },
  // 日期格式化
  filters: {
    timeFormat(value) {
      return formatTimestamp(value)
    },
  },
  data() {
    return {
      obj: {},
      showPicker: false,
      showState: false,
      showBirth: false,
      formDataList: [],
      moreList: [],
      form: {
        model: '',
        code: '',
        status: '',
        recipient: '',
        useDate: '',
        purchaser: '',
        materialType: '',
        purchaseDate: '',
        repairFrequency: '',
        maintenanceDate: '',
        maintenanceRecords: [],
        pictures: [],
      },
      status: '',
      // 状态list
      stateList: ['未用', '已用', '维修'],
      // 物资类型
      typeList: [],
      currentDate: new Date().getTime(),
      minDate: new Date(1970, 1, 1).getTime(),
      object: {},
      resonList: [],
      resonLists: [],
      purchaseDate: '',
      showRecode: false,
    }
  },
  onLoad(option) {
    this.id = option.id
  },
  onReady() {

  },
  mounted() {
    this.getDetail()
    this.getType()
  },
  methods: {
    // 编辑维修记录
    clickEdit(item) {
      this.$refs.maintenance.edit(item)
    },
    // 删除维修记录
    clickDelete(maintenanceReason) {
      Dialog.confirm({
        title: '标题',
        message: '确定删除？',
      }).then(() => {
        for (const [idx, item] of this.resonList.entries()) {
          if (maintenanceReason === item.maintenanceReason) {
            this.resonList.splice(idx, 1)
          }
        }
      }).catch(() => {
        console.log('取消')
      })
    },
    mainValue(item) {
      if (!item.isEdit) {
        this.resonList.push(item)
      }
    },
    addData() {
      this.$refs.maintenance.open()
    },
    // 物资类型
    getType() {
      const res = getDictDatas(DICT_TYPE.OFF_MATERIAL_TYPE)
      const list = []
      if (res) {
        for (const item of res) {
          list.push(item.label)
        }
      }
      this.typeList = list
    },
    // 详情
    async getDetail() {
      const res = await getGoodsDetail({ id: this.id })
      this.form = res.data
      uni.setNavigationBarTitle({
        title: res.data.itemName,
      })
      this.form.purchaseDate = res.data.purchaseDate
      this.time(res.data.purchaseDate)
      if (res.data.maintenanceVos) {
        this.resonLists = res.data.maintenanceVos
        this.showRecode = true
      }
      if (res.data.status === 1) {
        this.status = '已用'
      } else if (res.data.status === 2) {
        this.status = '未用'
      } else if (res.data.status === 3) {
        this.status = '维修'
      }
    },
    clickInput(type) {
      if (type === 'materialType') {
        this.showPicker = true
        this.showState = false
      } else if (type === 'status') {
        this.showPicker = false
        this.showState = true
      }
    },
    // 确定
    onConfirm(val) {
      this.form.type = val.detail.value
      this.showPicker = false
    },
    // 取消
    onCancel(type) {
      if (type === 'materialType') {
        this.showPicker = false
      } else if (type === 'status') {
        this.showState = false
      }
    },
    // 确定
    onStateConfirm(val) {
      if (val.detail.value === '未用') {
        this.status = '未用'
        this.form.status = 2
      } else if (val.detail.value === '已用') {
        this.status = '已用'
        this.form.status = 1
      } else if (val.detail.value === '维修') {
        this.status = '维修'
        this.form.status = 3
      }
      this.showState = false
    },
    time(value) {
      const dt = new Date(value)
      const year = dt.getFullYear()
      const month = dt.getMonth() + 1
      const date = dt.getDate()
      this.purchaseDate = `${year}-${month}-${date}`
    },
    async submitPerson() {
      if (this.form.purchaser === undefined || this.form.purchaser.trim().length === 0) {
        Toast('请填写采购人')
        return
      }
      if (this.form.materialType === undefined || this.form.materialType.trim().length === 0) {
        Toast('请填写物资类型')
        return
      }
      // if (this.form.recipient === undefined || this.form.recipient.trim().length === 0) {
      //   Toast('请填写受用人')
      //   return
      // }
      this.form.maintenanceVos = [...this.resonList, ...this.resonLists]
      this.form.id = Number(this.id)
      console.log(this.form, 'this.form')
      const res = await editMaterials(this.form)
      if (res.data) {
        uni.navigateBack({
          url: '/pages/office/goods-list/index',
          success() {
            const pages = getCurrentPages()// 获取页面栈
            const currPage = pages[pages.length - 1] // 当前页面a页面
            const beforePage = pages[pages.length - 2]// 上个页面b页面
            currPage.$vm.loadGoods()
          },
        })
      } else {
        Toast('保存失败')
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.good-info{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin: 15px 0px 0px 0px;
  .good-forms{
    width: 93%;
    margin: 0 auto;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
    border-radius: 2px;
  }
}
.mine{
  width: 100%;
}
.good-picture{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 91%;
  margin: 0 auto;
  border-bottom: 1px solid #f5f6f7;
  .img{
      padding-left:7px;
  }
  .img-close{
      position: relative;
      .close-icon{
          position: absolute;
          right: 0;
      }
  }
}
.good-pictures{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 92%;
  margin: 0 auto;
  .img{
      padding-left:7px;
  }

}
.good-time{
  width: 91%;
  margin: 0 auto;
  border-bottom: 1px solid #f5f6f7;
}
.good-record{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 89%;
  height:35px;
  margin: 0 auto;
  // border-bottom: 1px solid #f5f6f7;
  padding-right: 10px;
  .good-add{
    color:#739eca;
  }
}
.good-record-con{
  .good-record-detail{
    width: 90%;
    margin: 0 auto;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
    padding: 5px 0px;
    margin-bottom: 10px;
    .detail-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 10px 5px 0px;
      font-size: 14px;
      .detail-time{
        display: flex;
        div:nth-child(2){
          padding-left:15px;
        }
      }
      .detail-icon{
        van-icon:nth-child(2){
          padding: 0px 0px 0px 5px;
        }
      }
    }
    .detail-bot{
      display: flex;
      padding: 5px 0px;
      font-size: 14px;
      div:nth-child(2){
        padding-left:15px;
      }
    }
  }
}
</style>
<style lang="scss">
.good-pictures{
  .good-upload{
    van-button{
      button{
        border:1px solid #fff !important;
      }
    }
    .van-icon:before{
      color:#739ECA !important;
    }
  }
}
.mine{
  .van-cell{
      flex-flow: column;
  }
  .van-cell:after{
    border-bottom: 1px solid #fff !important;
  }
  view textarea{
    height: 17px;
    padding: 0px 0px 0px 10px;
    height:100% !important;
  }
}
.evaluates{
  view .van-cell__value{
    width: 93%;
    margin: 0 auto;
    margin-top:10px;
    background: #F9F8F8;
    .van-field__body{
      height:100px;
    }
  }
}
.moreSty{
  view {
    label{
      width:100%;
      display: flex;
      white-space: nowrap;
    }
    input{
      padding-right: 8px;
      text-align: right;
    }
    textarea{
      padding-right: 8px;
      text-align: right;
    }
  }
  .van-field__body{
    padding-right: 16px;
  }
}
.good-forms{
  .van-cell{
    padding: 10px 5px 10px 2px !important;
  }
  .van-cell__title{
    padding-left:16px;
  }
  .van-field__control{
    color:#999 !important;
    font-size: 14px;
  }
  // .van-icon:before{
  //   color:#999;
  // }
  // nav-icon{
  //     font-size: 11px;
  // }
  .van-field__label{
    color:#333 !important;
    font-size: 14px;
    white-space: normal !important;
  }
}
.good-btns{
  width: 280px;
  height: 36px;
  margin-top:25px;
  margin-bottom: 25px;
  button{
    height:100% !important;
  }
}
.good-time{
  .label{
      font-size: 14px;
  }
  .content{
      font-size: 14px;
  }
}
.good-picture{
  .file-list{
    margin-bottom: 10px;
  }
  .ze-upload .trigger{
    padding: 30px 0px 30px 0px !important;
  }
}
</style>
